<template>
  <el-form size="large"
    class="login-content-form">
    <el-form-item class="login-animation1">
      <el-input text
        placeholder="请输入用户名"
        v-model="state.ruleForm.userName"
        clearable
        autocomplete="off">
        <template #prefix>
          <el-icon class="el-input__icon"><ele-User /></el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item class="login-animation2">
      <el-input :type="state.isShowPassword ? 'text' : 'password'"
        placeholder="请输入密码"
        v-model="state.ruleForm.password"
        autocomplete="off">
        <template #prefix>
          <el-icon class="el-input__icon"><ele-Unlock /></el-icon>
        </template>
        <template #suffix>
          <i class="iconfont el-input__icon login-content-password"
            :class="state.isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
            @click="state.isShowPassword = !state.isShowPassword">
          </i>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item class="login-animation3">
      <el-col :span="17">
        <el-input text
          maxlength="4"
          placeholder="请输入验证码"
          v-model="state.ruleForm.code"
          clearable
          autocomplete="off"
          @keyup.enter="onSignIn">
          <template #prefix>
            <el-icon class="el-input__icon"><ele-Position /></el-icon>
          </template>
        </el-input>
      </el-col>
      <el-col :span="1"></el-col>
      <el-col :span="6">
        <span v-if="openRequestServer"
          v-waves
          class="login-content-code">
          <img :src="captchaImageSrc"
            @click="loadImageCaptcha" />
        </span>
        <el-button v-else
          class="login-content-code"
          v-waves>1234</el-button>
      </el-col>
    </el-form-item>
    <el-form-item class="login-animation4">
      <el-button type="primary"
        class="login-content-submit"
        round
        v-waves
        @click="onSignIn"
        :loading="state.loading.signIn"
        :disabled="state.loading.signIn">
        <span>登 录</span>
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script setup name="loginAccount">
import { reactive, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { initBackEndControlRoutes } from '/@/router/backEnd';
import { initFrontEndControlRoutes } from '/@/router/frontEnd';
import { formatAxis } from '/@/utils/formatTime';
import { RSAUtils, MD5Utils, Session, NextLoading } from '@/utils';
import { useImageCaptchaHook } from '@/hooks';
import { useSystemStore } from '@/stores/modules/store-system.js';

// 图像验证码
const { captchaUuid, captchaImageSrc, loadImageCaptcha } = useImageCaptchaHook();

// 定义变量内容
const route = useRoute();
const router = useRouter();
const state = reactive({
  isShowPassword: false,
  ruleForm: {
    code: '',
    userName: '',
    password: '',
  },
  loading: {
    signIn: false,
  },
});
// 系统变量定义
// const systemStores = useSystemStore();
const { openRequestServer } = useSystemStore();

// 时间获取
const currentTime = computed(() => {
  return formatAxis(new Date());
});
// 登录
const onSignIn = async () => {
  if (state.loading.signIn) return;
  state.loading.signIn = true;
  // 后端控制路由
  if (openRequestServer) {
    const signInData = {
      code: state.ruleForm.code || '',
      uuid: captchaUuid.value,
      userCode: state.ruleForm.userName,
      password: RSAUtils.encrypt(MD5Utils.encrypt(state.ruleForm.password)),
      // password: RSAUtils.encrypt(state.ruleForm.password),
    };
    const falg = await useSystemStore().signInBack(signInData)
    if (!falg) {
      state.loading.signIn = false;
      // 重新加载图片验证码
      loadImageCaptcha();
      return;
    }
    // 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
    const isNoPower = await initBackEndControlRoutes();
    // 执行完 initBackEndControlRoutes，再执行 signInSuccess
    signInSuccess(isNoPower);
    // 前端控制路由
  } else {
    await useSystemStore().signInFront();
    // 前端控制路由，2、请注意执行顺序
    const isNoPower = await initFrontEndControlRoutes();
    signInSuccess(isNoPower);
  }
};
// 登录成功后的跳转
const signInSuccess = (isNoPower) => {
  if (isNoPower) {
    useSystemStore().clearAllCache()
    Session.clear();
  } else {
    // 初始化登录成功时间问候语
    let currentTimeInfo = currentTime.value;
    // 登录成功，跳到转首页
    // 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
    if (route.query?.redirect) {
      // 解密路由传递参数
      let routeParams = route.query.params
      routeParams = atob(routeParams)
      routeParams = routeParams ? JSON.parse(routeParams) : ''
      router.push({
        path: route.query?.redirect,
        query: routeParams,
      });
    } else {
      router.push('/');
    }
    // 登录成功提示
    const signInText = '欢迎回来！';
    ElMessage.success(`${currentTimeInfo}，${signInText}`);
    // 添加 loading，防止第一次进入界面时出现短暂空白
    NextLoading.start();
  }
  state.loading.signIn = false;
};

if (openRequestServer) {
  // 初始加载图片验证码
  loadImageCaptcha();
}
</script>

<style scoped lang="scss">
:deep(.el-input__inner) {
	-webkit-box-shadow: 0 0 0 1000px rgba($color: #fff, $alpha: 1) inset;
	box-shadow: 0 0 0 1000px rgba($color: #fff, $alpha: 1) inset;
}
.login-content-form {
	margin-top: 20px;
	@for $i from 1 through 4 {
		.login-animation#{$i} {
			opacity: 0;
			animation-name: error-num;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
			animation-delay: calc($i/10) + s;
		}
	}
	.login-content-password {
		display: inline-block;
		width: 20px;
		cursor: pointer;
		&:hover {
			color: #909399;
		}
	}
	.login-content-code {
		width: 100%;
		padding: 0;
		font-weight: bold;
		letter-spacing: 5px;
		border-radius: 6px;
		width: 100px;
		height: 45px;
	}
	.login-content-submit {
		width: 100%;
		letter-spacing: 2px;
		font-weight: 300;
		margin-top: 15px;
	}
}
</style>
